<template>
    <div>
        <el-card class="contain">
            <div class="top" style="border-bottom: 1px solid #e6e6e6">
                <p>套餐信息</p>
                <div class="contnt" style="position: relative">
                    <span style="color: #586387">{{ Arrlist.packageStatus }} — {{ Arrlist.packageName }}</span>
                    <div style="width: 100%; display: flex; margin-bottom: 30px">
                        <div class="iconbox" v-for="(item, index) in Arrlist.surveyNames" :key="index">
                            <p>{{ item }}×{{ Arrlist.peopleNum }}</p>
                            <i v-if="item == '身份验证'" class="el-icon-user"></i>
                            <i v-if="item == '在校核实'" class="el-icon-school"></i>
                            <svg-icon v-if="item == '学位核实' || item == '学历验证'" icon-class="education" />
                            <svg-icon v-if="item == '诉讼记录查询'" icon-class="tree" />
                            <i v-if="item == '吸毒记录查询'" class="el-icon-smoking"></i>
                            <i v-if="item == '网贷记录查询'" class="el-icon-coin"></i>
                        </div>
                    </div>
                    <div style="position: absolute; bottom: 15px; right: 10px">
                        <span>人数：{{ Arrlist.peopleNum }}人 单价：￥</span>
                        <span style="color: rgba(214, 75, 36, 1); font-size: 22px">{{
                            Arrlist.oneAmount
                            }}</span>
                        <span>元 总价：￥</span>
                        <span style="color: rgba(214, 75, 36, 1); font-size: 22px">{{
                            Arrlist.allAmount
                            }}</span>
                        <span>元</span>
                    </div>
                </div>
            </div>
            <div class="top">
                <p>支付方式</p>
                <div class="contnt">
                    <span>支付方式</span><el-button>余额支付</el-button>
                    <div style="margin-top: 10px">
                        <span>可用余额：￥</span>
                        <span style="
                color: rgba(214, 75, 36, 1);
                font-weight: 700;
                font-size: 22px;
              ">{{ money }}</span>
                        <span>元</span>
                        <!-- <span v-if="money < Arrlist.allAmount">(余额不足,请联系管理员)</span> -->
                    </div>
                </div>
            </div>
        </el-card>
        <el-card class="contain">
            <div style="display: flex; justify-content: space-between">
                <div class="leftfoot">
                    <span class="textone">服务费用：</span>
                    <span class="texttwo">￥{{ Arrlist.allAmount }}</span>
                    <span class="textone">元</span>
                </div>
                <div style="flex: 1; text-align: right">
                    <el-button @click="back()">上一步</el-button>
                    <el-button type="primary" @click="payment()">支付</el-button>
                </div>
            </div>
        </el-card>
        <el-dialog title="确认支付该笔订单吗？" :visible.sync="dialogVisible" width="550px" :before-close="handleClose">
            <table>
                <tr>
                    <td>操作人</td>
                    <td>{{ Arrlist.createBy }}</td>
                </tr>
                <tr>
                    <td>背调版本</td>
                    <td>{{ Arrlist.packageName }}</td>
                </tr>
                <tr>
                    <td>支付方式</td>
                    <td>账户余额</td>
                </tr>
                <tr>
                    <td>背调人数</td>
                    <td>{{ Arrlist.peopleNum }}人</td>
                </tr>
                <tr>
                    <td>支付金额</td>
                    <td>
                        <span style="
                color: rgba(214, 75, 36, 1);
                font-weight: 700;
                font-size: 18px;
              ">{{ Arrlist.allAmount }}</span>元
                    </td>
                </tr>
            </table>
            <span slot="footer" class="dialog-footer" style="display: flex; justify-content: space-between">
                <div>
                    <i class="el-icon-warning" style="color: #faad14"> </i><span
                        style="color: #535e83; font-size: 14px">确认支付后，余额将直接扣除，无法退回。</span>
                </div>
                <div>
                    <el-button size="small" @click="dialogVisible = false">取 消</el-button>
                    <el-button size="small" type="primary" @click="handleok()">确 定</el-button>
                </div>
            </span>
        </el-dialog>
        <el-dialog title="支付结果" :visible.sync="dialogVisible2" width="550px" :before-close="handleClose2">
            <div class="successContent">
                <i class="el-icon-success" style="font-size: 48px; color: #30c25c"></i>
                <p>成功</p>
                <p>请在【背调订单】中浏览订单进度</p>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="Vieworder">查看订单</el-button>
                <el-button size="small" type="primary" @click="dialogVisible2 = false">再次创建</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { assetBalance } from "@/api/asset/asset";
import { payOrder } from "@/api/order/order";
export default {
    name: "",
    data() {
        return {
            Arrlist: [],
            dialogVisible: false,
            dialogVisible2: false,
            money: '',
        };
    },
    created() {
        this.Arrlist = this.$route.query.array;
        this.getBalance();
    },
    methods: {
      // 获取余额
      getBalance() {
        assetBalance().then(response => {
          this.money = response.data;
        });
      },
      // 取消
      back() {
          this.$router.push({ path: '/BackgroundCheck/BackgroundCheck' });
      },
      payment() {
          this.dialogVisible = true;
          this.$notify({
              title: "",
              dangerouslyUseHTMLString: true,
              duration: 3000,
              showClose: false,
              message: `   <div style="display: flex;height: 60px;">
     <div style="width:30%">
      <i class='el-icon-s-custom' style="font-size: 48px; color: #017eff"> </i></div>
      <div style="flex:1">
          <p>张三丰</p>
          <p>1522222542</p>
      </div>
      </div>
      <div  style="border-bottom: 1px solid #fbfbfb; padding: 10px;"> <i class="el-icon-key" style=" margin-right: 10px;"></i>账号类型：企业主账号</div>
      <div style="border-bottom: 1px solid #fbfbfb; padding: 10px;"> <i class="el-icon-office-building" style=" margin-right: 10px;"></i>企业名称：北京前途有限责任公司</div>
      <div style="border-bottom: 1px solid #fbfbfb; padding: 10px;"> <i class="el-icon-time" style=" margin-right: 10px;"></i>创建时间：2024-06-01</div>
      <div style="border-bottom: 1px solid #fbfbfb; padding: 10px;"> <i class="el-icon-message" style=" margin-right: 10px;"></i>邮       箱：1524515@163.com</div>
      `,
          });

      },
      handleok() {
          payOrder(this.Arrlist).then( res => {
            this.dialogVisible = false;
            this.dialogVisible2 = true;
          })
      },
      handleClose() {
          this.dialogVisible = false;
      },
      handleClose2() {
          this.dialogVisible2 = false;
      },
      Vieworder() {
          this.dialogVisible2 = false;
          this.$router.push({ path: '/order/order' });
      }
    },
};
</script>

<style lang="scss" scoped>
.contain {
    margin: 16px 18px;

    .top {
        .contnt {
            width: 100%;
            background-color: #ecf3ff;
            border-radius: 15px;
            margin-bottom: 15px;
            padding: 10px 15px;
            min-height: 100px;

            span {
                font-size: 14px;
                margin: 5px;
            }

            .iconbox {
                text-align: center;
                margin: 15px;

                i {
                    font-size: 24px;
                }
            }
        }
    }
}

.leftfoot {
    height: 15px;
    display: flex;
    line-height: 36px;

    .textone {
        color: rgba(31, 35, 43, 1);
        font-size: 14px;
        font-weight: normal;
        white-space: nowrap;
    }

    .texttwo {
        margin-right: 5px;
        font-weight: 700;
        overflow-wrap: break-word;
        color: rgba(214, 75, 36, 1);
        font-size: 22px;
        white-space: nowrap;
    }
}

table,
td {
    width: 500px;
    border: 1px solid#ecf3ff;
    border-collapse: collapse;
}

tr td:first-child {
    text-align: center;
    background-color: #535e83;
    color: #fff;
}

td {
    padding: 10px;
}

.successContent {
    text-align: center;

}
</style>
